import React, { createContext, useContext, useState } from 'react'

const initValue = {
	name: 'amin',
	age: 17,
}
const Context = createContext(initValue)
const { Provider } = Context

const Parent = () => {
	const [step, setStep] = useState(0)

	const click = () => {
		setStep((n) => n + 1)
	}

	return (
		<Provider value={{ step, setStep }}>
			<div>
				{step}
				<button onClick={click}>父按钮</button>
			</div>
			<Child />
		</Provider>
	)
}

const Child = () => {
	return (
		<div>
			<div>
				上面是父组件
				<br />
				------------
				<br />
				下面是孙组件
			</div>
			<Child2 />
		</div>
	)
}

const Child2 = () => {
	const ctx = useContext(Context)
	const { setStep, step } = ctx

	const click = () => {
		setStep((n) => n + 1)
	}

	return (
		<div>
			<button onClick={click}>孙按钮</button>
			{step}
		</div>
	)
}

export default Parent
